<script setup lang="ts">
import { find } from "lodash";
import { ref } from "vue";
import { LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { useLocalStore } from "./../../store/index";
import { MAP_ACTION } from "@/views/pipe-network/constants";
import { queryPointsPro } from "@/api/pipe";
import LMarkerClusterGroup from "../MarkerCluster/index.vue";
import "vue-leaflet-markercluster/dist/style.css";
import { getAssetsFile } from "@/utils/map";
const { L }: any = window;
import GisPointInfoAPI from "@/api/GisPointInfoAPI";
const props = defineProps({
  deviceCategoryList: Array<any>,
});
const pointListRef = ref([]);
const dialogVisible = ref<boolean | number>(false);
const mapStore = useMapStore();
const { mapAction } = storeToRefs(mapStore);
const localStore = useLocalStore();
const { markerClusterFlag, visiblePointClassIds } = storeToRefs(localStore);
const mck = ref(0);
const onClick = (e: any) => {
  console.log(e);
  // debugger;
  // const isConnectionTwoPointsAction =
  //   mapAction.value === MAP_ACTION.CONNECTION_POINT_TWO;
  // const isModifyInfoAction = mapAction.value === MAP_ACTION.EDIT;
  // if (isConnectionTwoPointsAction) {
  //   mapStore.addSelectedMarkers(e.latlng);
  // }
  // if (isModifyInfoAction) {
  //   const { pointId } = e.target.options.attribution;
  //   const obj = pointListRef.value.find(
  //     (item: any) => item.pointId === pointId
  //   );
  //   if (obj) {
  //     mapStore.setEditingPipePoint(obj);
  //   }
  // }
};
function f_GetWarningHtml(pointId) {
  const pointCategoryList = props.deviceCategoryList?.point;
  let data = find(pointListRef.value, { pointId: pointId });
  let pointAttributeData = data.pointAttribute ? data.pointAttribute : [];

  console.log(data);
  let str =
    '<div style="width: 220px;">' +
    '<div style="border-top-left-radius: 11px;border-top-right-radius: 11px;height: 32px;line-height: 32px;color: #fff;text-align: center;background: ' +
    (data.status != 0 ? "red" : "#FFC107") +
    '">管点详情</div>' +
    '<p style="margin: 10px;"><span style="font-weight: bold;">地址：</span>' +
    data.address +
    "</p>" +
    '<p style="margin: 10px;"><span style="font-weight: bold;">设备名称：</span>' +
    data.pointName +
    "</p>" +
    '<p style="margin: 10px;"><span style="font-weight: bold;">GIS编号</span>' +
    data.pointGisNo +
    "</p>";

  pointAttributeData.forEach((item) => {
    if (item.type != 4) {
      str +=
        '<p style="margin: 10px;"><span style="font-weight: bold;">' +
        item.attr +
        "</span>" +
        item.value +
        "</p>";
    }
  });
  str += "</div>";
  return str;
}

const getAllPoints = () => {
  queryPointsPro({ pageSize: 100000, pageIndex: 1 }).then(
    ({ data, errors, succeeded }) => {
      if (succeeded && Array.isArray(data?.items)) {
        pointListRef.value = data.items
          .filter((item: any) => item.jsonGeom)
          .map((item: any) => {
            const [lng, lat] = JSON.parse(item.jsonGeom).coordinates;
            return {
              ...item,
              latlng: [lat, lng],
              icon: getIcon(item.classId),
            };
          });
      }
    }
  );
};
const _deletePoint = (pointId: number) => {
  deletePoint(pointId).then((res) => {
    if (res.succeeded) {
      ElMessage("删除成功！");
      getAllPoints();
    } else {
      ElMessage("删除失败！");
    }
  });
};
const getIcon = (classId: string) => {
  const pointCategoryList = props.deviceCategoryList?.point;
  if (pointCategoryList) {
    const obj = pointCategoryList.find((item: any) => item.classId === classId);
    if (obj) {
      const { image } = obj;
      const iconUrl = getAssetsFile("device/" + image + ".png");
      return L.icon({
        iconUrl,
        iconSize: [32, 32],
        iconAnchor: [16, 27],
      });
    }
  }
};
onMounted(() => getAllPoints());
watchEffect(() => {
  if (Array.isArray(visiblePointClassIds.value)) {
    pointListRef.value.forEach((item: any) => {
      item.visible = visiblePointClassIds.value.includes(item.classId);
    });
    mck.value = pointListRef.value.filter(
      (item: any) => item.visible !== false
    );
  } else {
    pointListRef.value.forEach((item: any) => {
      item.visible = true;
    });
    mck.value = 0;
  }
});
</script>

<template v-if="positionRef">
  <LMarkerClusterGroup v-if="markerClusterFlag" :key="mck">
    <LMarker
      :key="pointId"
      v-for="{ latlng, pointId, icon } in pointListRef.filter(
        (item: any) => item.visible !== false
      )"
      :lat-lng="latlng"
      :icon="icon"
      @click="onClick"
      :attribution="{ pointId }"
      :draggable="mapAction === MAP_ACTION.MOVE"
    >
      <LPopup :content="f_GetWarningHtml(pointId)" />
    </LMarker>
  </LMarkerClusterGroup>
  <template v-if="!markerClusterFlag">
    <LMarker
      :key="pointId"
      v-for="{ latlng, pointId, icon } in pointListRef.filter(
        (item: any) => item.visible !== false
      )"
      :lat-lng="latlng"
      :icon="icon"
      @click="onClick"
      :attribution="{ pointId }"
      :draggable="mapAction === MAP_ACTION.MOVE"
    />
  </template>
  <template v-if="mapAction === MAP_ACTION.DELETE">
    <LMarker
      v-for="{ latlng, pointId } in pointListRef"
      :key="pointId"
      :lat-lng="latlng"
      :icon="
        L.divIcon({
          html: `<div style=&quot;width: 13px;height: 13px;cursor: pointer; position: relative; top: -37px; left: 17px; border: 1px solid;&quot;>
              <svg viewBox=&quot;0 0 40 40&quot; style=&quot;position: relative;left: 0px; top: -4px;&quot;>
                  <path stroke=&quot;#FF0000&quot; stroke-width=&quot;3&quot; d=&quot;M 10,10 L 30,30 M 30,10 L 10,30&quot; />
                  </svg>
              </div>`,
          className: 'abc',
        })
      "
      @click="dialogVisible = pointId"
    />
  </template>
  <el-dialog v-model="dialogVisible" title="提示" width="500">
    <span>确认删除吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="
            _deletePoint(dialogVisible);
            dialogVisible = false;
          "
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
